
<!-- Copyright IBM Corp, All Rights Reserved.

SPDX-License-Identifier: Apache-2.0
-->

<div class="uk-grid uk-margin-large-top">
	<div class="uk-text-center">
		<% if (health >= 90) { %>
		<div class="uk-text-truncate uk-margin-bottom perfect-health-square">
			<label class="font-size-15">Infrastructure</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle perfect-label health">Perfect</label>
			</div>
		</div>
		<% } else if (health >= 80) { %>
		<div class="uk-text-truncate uk-margin-bottom good-health-square">
			<label class="font-size-15">Infrastructure</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle good-label health">Good</label>
			</div>
		</div>
		<% } else { %>
		<div class="uk-text-truncate uk-margin-bottom attention-health-square">
			<label class="font-size-15">Infrastructure</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle attention-label health">Attention</label>
			</div>
		</div>
		<% } %>
		<label class="font-size-20">Health</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle uk-margin-small-right font-size-50 cpu">${cpu}</label>
			<label class="uk-vertical-align-middle font-size-20" style="margin-top:20px;">%</label>
		</div>
		<label class="font-size-20">CPU Usage</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle uk-margin-small-right font-size-50 memory">${memory}</label>
			<label class="uk-vertical-align-middle font-size-20" style="margin-top:20px;">%</label>
		</div>
		<label class="font-size-20">Memory Usage</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle uk-margin-small-right font-size-50 latency">${latency}</label>
			<label class="uk-vertical-align-middle font-size-20" style="margin-top:20px;">ms</label>
		</div>
		<label class="font-size-20">Latency</label>
	</div>
</div>
<hr class="uk-grid-divider">
<div class="uk-margin-top canvas" style="height:400px;"></div>